<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/style.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/setFont.js"></script>
    <script type="text/javascript" src="js/swiper.min.js"></script>
    <script src="js/base.js"></script>
</head>

<body>

    <div class="box centerWidth swiper-container" id = "content">
    <div id="snowflake">
        <!--静音按钮-->
        <dl class="mute">
            <dt></dt>
            <dd></dd>
            <audio  id="music" preload="auto" src="./images/bgMusic.mp3" loop="loop" ></audio>
        </dl>
        <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide-active wrap1 swiper-no-swiping">
                <div class="start">
                    <img class="img" src="./images/img1.png">
                    <img class="yy" src="./images/img1o.png">
                </div>
            </div>
            <div class="swiper-slide wrap2">
                <div class="swiper-container sec-section">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" style="overflow-y: auto;">
                            <img class="img" src="./images/p2.jpg">
                            <div class="item item1">
                                <div class="con">
                                    <img src="./images/t1.png">
                                </div>
                                <div class="pick">
                                    <img src="./images/img2.png">
                                </div>
                            </div>
                            <div class="item item2">
                                <div class="con">
                                    <img src="./images/t2.png">
                                </div>
                                <div class="pick">
                                    <img src="./images/img2.png">
                                </div>
                            </div>
                            <div class="item item3">
                                <div class="con">
                                    <img src="./images/t3.png">
                                </div>
                                <div class="pick">
                                    <img src="./images/img2.png">
                                </div>
                            </div>
                            <div class="item item4">
                                <div class="con">
                                    <img src="./images/t4.png">
                                </div>
                                <div class="pick">
                                    <img src="./images/img2.png">
                                </div>
                            </div>
                            <div class="item item5">
                                <div class="con">
                                    <img src="./images/t5.png">
                                </div>
                                <div class="pick">
                                    <img src="./images/img2.png">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide wrap3">
                <div class="swiper-container th-section">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" style="overflow-y: auto;">
                            <img class="pic3" src="./images/p3.jpg">
                        </div>
                    </div>
                </div>
            </div>
        </div>
               </div>
    </div>

     
            <!--静音按钮-->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            function audioAutoPlay() {
                var audio = document.getElementById('music');
                    audio.play();
                document.addEventListener("WeixinJSBridgeReady", function () {
                    audio.play();
                }, false);
                audio.onended = function () {
                    audio.load();
                    audio.play();
                }
            }
            audioAutoPlay();
        });


$(function() {
    var snowflakeURl = [
        './images/img3.png',
        './images/img4.png',
    ]  
  
   // var container = document.getElementById("content");
   visualWidth = 750px;
       visualHeight = 1200px;
　　//获取content的宽高
    function snowflake() {
        // 雪花容器
        var flakeContainer = document.getElementById('#snowflake');
　　　　　　
        // 随机六张图
        function getImagesName() {
            return snowflakeURl[[Math.floor(Math.random() * 8)]];
        }
        // 创建一个雪花元素
        function createSnowBox() {
            var url = getImagesName();
            return $('<div class="snowbox" />').css({
                'width': 25,
                'height': 26,
                'position': 'absolute',
                'backgroundRepeat':'no-repeat',
                'zIndex': 100000,
                'top': '-41px',
                'backgroundImage': 'url(' + url + ')'
            }).addClass('snowRoll');
        }
        // 开始飘花
        setInterval(function() {
            // 运动的轨迹
            var startPositionLeft = Math.random() * visualWidth - 100,
                startOpacity    = 1,
                endPositionTop  = visualHeight - 40,
                endPositionLeft = startPositionLeft - 100 + Math.random() * 500,
                duration        = visualHeight * 10 + Math.random() * 5000;
            // 随机透明度，不小于0.5
            var randomStart = Math.random();
            randomStart = randomStart < 0.5 ? startOpacity : randomStart;
            // 创建一个雪花
            var $flake = createSnowBox();
            // 设计起点位置
            $flake.css({
                left: startPositionLeft,
                opacity : randomStart
            });
            // 加入到容器
            flakeContainer.append($flake);
            // 开始执行动画
            $flake.transition({
                top: endPositionTop,
                left: endPositionLeft,
                opacity: 0.7
            }, duration, 'ease-out', function() {
                $(this).remove() //结束后删除
            });
        }, 500);
    }
     snowflake()
　　　//执行函数
})

    </script>


</body>

</html>